<template>
	<div id="app">

		<img alt="Vue logo" src="../assets/loginImg/loginImage.png">
		<div>
			<br />
			账号：<el-input :style="inputstyle" placeholder="请输入账号" v-model="aId" clearable></el-input><br /><br />
			密码：<el-input :style="inputstyle" placeholder="请输入密码" v-model="pwd" show-password></el-input><br /><br />
		</div>
		<!--图标-->
		<div>
			<el-row>
				<el-button type="primary" @click.prevent="userlogin">登录</el-button>
				<!-- 				<el-button type="primary">主要按钮</el-button>
				<el-button type="success">成功按钮</el-button>
				<el-button type="info">信息按钮</el-button>
				<el-button type="warning">警告按钮</el-button>
				<el-button type="danger">危险按钮</el-button>
				<el-button type="primary" icon="el-icon-search">搜索</el-button> -->
			</el-row>
		</div>
		<router-view></router-view>
	</div>
</template>

<script>
	import request from '../utils/axios/request.js'
import { setCookie } from '../utils/cookie/cookie.js'
	export default {
		name: 'app',
		data() {
			return {
				inputstyle: {
					width: "300px"
				},

				aId: "",
				pwd: ''
			}

		},

		methods: {

			userlogin() {
				//console.log(this.uId.length)
				if (this.aId.length == 0) {
					alert("请输入账号")
					//console.log("请输入账号")
				} else if (this.pwd.length == 0) {
					alert("请输入密码")
					//console.log("请输入密码")
				} else {
					request({
							method: 'post',
							url: '/admin/login',
							params: {
							    aid: this.aId,
								pwd: this.pwd
							}
						})

						.then((res) => {
							var vo = res.data;
							//console.log(vo)
							// 请求成功
							// console.log(res) // res 服务器响应回来的数据
							// console.log(res.data)
							if (res.data.code==11) {
								//如果登录成功，把token存储到cookie
								//console.log(1)
								this.$cookies.set("token",vo.msg)
								// setCookie("token",vo.msg)
								// this.token = getCookie("token")
								// console.log(this.token)
								// console.log(2)
					
								this.$router.push('/adminIndex')
							}else if(res.data.code==1002){
								alert("登录失败，账号或密码错误")
							}
							// console.log(res.data)
							// console.log(res.data.data)
							// console.log(res.config.params)
						})
				}
			}
		}
	}
</script>

<style>
	img {
		width: 50%;
		height: 350px;
	}
</style>